<template>
  <div class="box">
    <input
      type="text"
      placeholder="输入要查询的大学或专业"
      v-model="keyWord"
      @keyup.enter="search"
    />
    <span @click="search"
      ><Icon type="icon-sousuo3" Styles="font-size:22px"></Icon
    ></span>
  </div>
</template>

<script>
import Icon from "@/components/Icon.vue";
export default {
  name: "SearchComponent",
  // props: ["keyWord"],
  data() {
    return {
      keyWord: "",
    };
  },
  methods: {
    search() {
      // console.log(this.keyWord);
      // this.$emit("input", this.keyWord);
      if (this.keyWord.includes("大学")) {
        // :to="'/college/' + item.collegeName"
        this.$router.push({ path: "/college/" + this.keyWord });
      } else {
        // '/majormain/' + item.text.substring(0, item.text.indexOf('-'))
        this.$router.push({ path: "/majormain/" + this.keyWord });
      }
    },
  },
  components: {
    Icon,
  },
};
</script>

<style lang="less" scoped>
@height: 40px;
.box {
  padding: 0px 20px;
  display: flex;
  width: 100%;
  height: 100%;
  margin: 15px 0 5px 0;
  justify-content: center;
  font-family: "宋体";
}
input {
  width: 300px;
  height: @height;
  border: 2px solid #333;
  background-color: transparent;
  border-radius: 10px 0px 0px 10px;
  padding: 6px;
  box-sizing: border-box;
  font-size: 16px;
  border-right: 0px;
  outline: none;
  text-indent: 1em;
}
input::placeholder {
  color: #9dacb4;
  font-size: 13px;
}
span {
  display: flex;
  width: 60px;
  cursor: pointer;
  height: @height;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  border-radius: 0px 10px 10px 0px;
  border: 2px solid #333;
  border-left: 0px;
}
</style>